<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Bethel Translations</title>
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <!-- Le styles -->
    <link href="style/bootstrap.css" rel="stylesheet">
    <style type="text/css">
      body {
        padding-top: 40px;
      }
    </style>

    <!-- Le fav and touch icons -->
    <link rel="shortcut icon" href="images/favicon.ico">
    <link rel="apple-touch-icon" href="images/apple-touch-icon.png">
    <link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">

    <script type="text/javascript" src="js/jquery/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="js/bootstrap-modal.js"></script>
    <script type="text/javascript" src="js/bootstrap-dropdown.js"></script>
  </head>

  <body>

    <div class="topbar">
      <div class="fill">
        <div class="container">
          <a class="brand" href="index.html">Bethel Translations</a>
          <ul class="nav">
            <li class="active"><a href="index.html">Home</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="testimonials.html">Testimonials</a></li>
            <li><a href="contact.html">Contact</a></li>
          </ul>
          <ul class="secondary-nav">
            <li class="dropdown" data-dropdown="dropdown">
              <a href="#" class="dropdown-toggle">Login</a>
              <ul class="dropdown-menu">
                <li><a href="#" data-controls-modal="modal-from-dom-clients" 
              data-backdrop="true" data-keyboard="true">Clients</a></li>
              <li><a href="#" data-controls-modal="modal-from-dom-admin" 
              data-backdrop="true" data-keyboard="true">Admin</a></li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <div id="modal-from-dom-clients" class="modal hide fade">
      <div class="modal-header">
        <a href="#" class="close">&times;</a>
        <h3>Login form</h3>
      </div>
      <div class="modal-body">
        <p>
          <form>
              <label for="login-email">Your e-mail:</label>
              <div class="input">
                <input class="xlarge span4" id="login-email" name="login-email" size="30" type="text" />
              </div>
              
              <label for="login-ref-code">Your reference code:</label>
              <div class="input">
                <input class="xlarge span4" id="login-ref-code" name="login-ref-code" size="30" type="password" />
              </div>
          </form>
        </p>
      </div>
      <div class="modal-footer">
        <a href="dashboard/client/index.html" class="btn primary">Go!</a>
        <a href="#" class="btn secondary">I can't find my reference code</a>
      </div>
    </div>

    <div id="modal-from-dom-admin" class="modal hide fade">
      <div class="modal-header">
        <a href="#" class="close">&times;</a>
        <h3>Login form</h3>
      </div>
      <div class="modal-body">
        <p>
          <form>
              <label for="login-email">Your e-mail:</label>
              <div class="input">
                <input class="xlarge span4" id="login-email" name="login-email" size="30" type="text" />
              </div>
              
              <label for="login-ref-code">Your reference code:</label>
              <div class="input">
                <input class="xlarge span4" id="login-ref-code" name="login-ref-code" size="30" type="password" />
              </div>
          </form>
        </p>
      </div>
      <div class="modal-footer">
        <a href="dashboard/admin/index.html" class="btn primary">Go!</a>
        <a href="#" class="btn secondary">I can't find my reference code</a>
      </div>
    </div>

    <div class="container">

      <!-- Main hero unit for a primary marketing message or call to action -->
      <div class="hero-unit">
        <h1>Hello, world!</h1>
        <p>Vestibulum id ligula porta felis euismod semper. Integer posuere erat
        a ante venenatis dapibus posuere velit aliquet. Duis mollis, est non
        commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec
        elit.</p>
        <p><a class="btn primary large">Learn more &raquo;</a></p>
      </div>
      
      <!--<form>-->
        <!-- Example row of columns -->
        <div class="row">
          <div class="span-one-third" style="text-align:center">
            <h2>Input your info</h2>
            <!--<p>Etiam porta sem malesuada magna mollis euismod. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>-->
            <p>
            <form>
              <label for="xlInput">Your name</label>
              <div class="input">
                <input class="xlarge span3" id="xlInput" name="xlInput" size="30" type="text" />
              </div>
                
              <label for="xlInput2">Your e-mail</label>
              <div class="input">
                <input class="xlarge span3" id="xlInput2" name="xlInput2" size="30" type="text" />
              </div>
            </form>
            </p>
          </div>
          <div class="span-one-third" style="text-align:center">
            <h2>Upload your docs</h2>
             <!--<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>-->
             <p>
             <form>
                <label for="language-from">Source language</label>
                <div class="input">
                  <select class="medium" name="language-from" id="language-from-select">
                    <option>English</option>
                    <option>French</option>
                    <option>Italian</option>
                  </select>
                </div>

              </p>
              <p>
                  <label for="documents-upload">Documents</label>
                  <div class="input">
                  <input class="input-file" id="documents-upload" name="documents-upload" type="file">
                  <!--<input class="input-file" id="fileInput2" name="fileInput" type="file">
                  <input class="input-file" id="fileInput3" name="fileInput" type="file">-->
                  </div>
              </form>
             </p>
         </div>
          <div class="span-one-third" style="text-align:center">
            <h2>Set requirements</h2>
            <!--<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper.</p>-->
            <p>
            <form>
              <label for="language-to">Language</label>
                <div class="input">
                  <select class="medium" name="language-to" id="language-to-select">
                    <option>English</option>
                    <option>French</option>
                    <option>Italian</option>
                  </select>
                </div>

                <label for="currency">Currency</label>
                <div class="input">
                  <select class="medium" name="currency" id="currency-select">
                    <option>GBP &pound;</option>
                    <option>EUR &euro;</option>
                  </select>
                </div>
            </form>
            </p>
          </div>
        </div>
<br />
<br />
<br />
        <div class="row">
          <div class="span-one-third">&nbsp;</div>
          <div class="span-one-third" style="text-align:center">
            <p><a class="btn" href="#">Get your quote! &raquo;</a></p>
            <input type="submit" class="btn primary" value="Get your quote!">
          </div>
          <div class="span-one-third">&nbsp;</div>
          <!--<div class="span-one-third">Quote</div>-->
        </div>
      <!-- </form> -->

      <footer>
        <p>Bethel Translations 2011</p>
      </footer>

    </div> <!-- /container -->

  </body>
</html>
